<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import { reactive } from 'vue'
import 'ol/ol.css'
import type { OptionProps } from 'ant-design-vue/es/auto-complete/Option'



const router = useRouter()
const { routes } = router.options

const state = reactive({
  selectedKeys: ['CesiumWidget'],
  searchKey: ''
})

const menus = reactive(
  routes.map((i) => ({
    key: i.name,
    icon: '',
    label: i.name,
    title: i.name,
    path: i.path,
    value: i.path
  }))
)

const options = reactive(
  routes.map((i) => ({
    label: i.name,
    value: i.name
  }))
)

const menuClickHandler = ({ item }) => {
  router.push(item.path)
}

const filterOption = (input: string, option: OptionProps) => {
  return option.value.toUpperCase().indexOf(state.searchKey.trim().toUpperCase()) >= 0
}

const onSelect = (value: string) => {
  router.push(`/${value}`)
}
</script>

<template>
  <div class="layout">
    <div class="menu">
      <a-auto-complete
        v-model:value="state.searchKey"
        :options="options"
        style="width: 90%; margin: 15px"
        placeholder="search here"
        @select="onSelect"
        :filter-option="filterOption"
      />
      <a-menu
        v-model:selectedKeys="state.selectedKeys"
        mode="inline"
        :items="menus"
        @click="menuClickHandler"
      ></a-menu>
    </div>
    <main class="main">
      <RouterView />
    </main>
  </div>
</template>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  .menu {
    width: 240px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .main {
    width: calc(100% - 240px);
    height: 100%;
    position: relative;
  }
}
</style>
